 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
     <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
     <title>p18-21品牌案例</title>
 </head>
 <body>
     <div id="app">
        <div class="panel panel-primary">
              <div class="panel-heading">
                    <h3 class="panel-title">添加品牌</h3>
              </div>
              <div class="panel-body form-inline">
                  <label>
                      Id:
                      <input type="text" class="form-control" v-model="id">
                  </label>
                  <label>
                      Name:
                        <input type="text" class="form-control" v-model="name" @keyup.f2="add">
                    </label>
                    <!-- 在vue中，使用事件绑定机制，为元素制定处理函数的时候，如果加了小括号，就可以为函数传参了 -->
                    <input type="button" value="添加" class="btn btn-primary" @click="add">
                    <label>
                            搜索名称关键词:
                              <input type="text" class="form-control" v-model="kw" v-focus v-color="'blue'">
                          </label>
              </div>
        </div>

        <table class="table table-hover table-bordered table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr v-for="item in searchlist(kw)" :key="item.id"> -->
                <tr v-for="item in searchlist()" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime|dateFormat("yyyy-mm-ddss")}}</td>
                    <td><a @click.prevent="del(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>
     </div>
     <div id="app2">
         <!-- 过滤器调用的时候采用就近原则，如果私有过滤器和全局过滤器名称一样的时候，优先调用私有过滤器 -->
            <h3 v-color="'pink'" v-font-weight="100" v-fontsize="50">{{dt|dateFormat}}</h3>
        </div>
     <script>
         //自定义全局指令Vue.directive()
         //其中参数1指令的名称注意在定义的时候，指令的名称前面，不需要加v-前缀，但是在调用的时候必须在指令名称前加v-前缀进行调用
        //参数2 是一个对象 这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
        Vue.directive("focus",{
            bind:function(){
                //每当指令绑定到元素上的时候，会立即执行这个函数，只执行一次
            },
            inserted:function(el){
                //表示元素插入到DOM中的时候，会执行inserted函数
                el.focus();
            },
            updated:function(){
                //表示当VNode更新的时候，会执行updated，可能触发多次
            }
            
        })
        Vue.directive("color",{
            bind:function(el,binding){
                el.style.color=binding.value;
            },
            inserted:function(){},
            updated:function(){}
        })
        //  自定义全局键盘修饰符
         Vue.config.keyCodes.f2=113;
         Vue.filter("dateFormat",function(dateString,partnner=''){
             var dt=new Date(dateString);
             var y=dt.getFullYear();
             var m=dt.getMonth()+1;
             var d=dt.getDate();
             if(partnner&&partnner.toLowerCase()=="yyyy-mm-dd"){
                return `${y}-${m}-${d}`;
             }else{
                 var hh=dt.getHours();
                 var mm=dt.getMinutes();
                 var ss=dt.getSeconds();
                 return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
             }
            
         })
         var vm=new Vue({
             el:"#app",
             methods:{
                add(){
                    this.list.push({
                        id:this.id,
                        name:this.name,
                        ctime:new Date()
                    })
                    this.id=this.name="";
                },
                del:function(id){
                    this.list.some((item,i)=>{
                        if(item.id==id){
                            this.list.splice(i,1);
                            return true;
                        }
                    })
                },
                searchlist(){
                    // var newList=[];
                    // this.list.forEach(item => {
                    //     if(item.name.indexOf(keywords)!=-1){
                    //         newList.push(item);
                    //     }
                    // });
                    // return newList;

                    var newList=this.list.filter(item=>{
                        if(item.name.includes(this.kw)){
                            return item;
                        }
                    })
                    return newList;
                }
             },
             data:{
                 id:"",
                 name:"",
                 kw:"",
                list:[
                    {id:1,name:"奔驰",ctime:new Date()},
                    {id:2,name:"宝马",ctime:new Date()},
                    {id:3,name:"奥迪",ctime:new Date()}
                ]
             }
         })
         var vm2=new Vue({
            el:"#app2",
            data:{
                dt:new Date()
            },
            methods:{},
            filters:{
                dateFormat:function(dateString,partnner=""){
                    var dt=new Date(dateString);
                    var y=dt.getFullYear();
                    var m=(dt.getMonth()+1).toString().padStart(2,"0");
                    var d=dt.getDate().toString().padStart(2,"0");
                    if(partnner&&partnner.toLowerCase()=="yyyy-mm-dd"){
                        return `${y}-${m}-${d}`;
                    }else{
                        var hh=dt.getHours().toString().padStart(2,"0");
                        var mm=dt.getMinutes().toString().padStart(2,"0");
                        var ss=dt.getSeconds().toString().padStart(2,"0");
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
                    }
                }
            },
            directives:{
                "font-weight":{
                    bind:function(el,binding){
                        el.style.fontWeight=binding.value;
                    },
                    inserted:function(){},
                    updated:function(){}
                },
                'fontsize':function(el,binding){
                    el.style.fontSize=binding.value+"px";
                }
            }
        })
     </script>
 </body>
 </html>